<template>
	<!--		顶部区域-->
	<el-row class="top">
		<el-col :span="24">
			<el-form :inline="true" :model="state.queryFrom" >
				<el-form-item label="商品编号：">
					<el-input v-model="state.queryFrom.id" placeholder="产品编号" clearable @input="init()"/>
				</el-form-item>
				<el-form-item label="产品名称：">
					<el-input v-model="state.queryFrom.name" placeholder="产品名称" clearable @input="init()" />
				</el-form-item>
				<el-form-item label="资源状态" >
					<el-select v-model="state.queryFrom.productIsPutaway" placeholder="请选则" @change="init()">
						<el-option v-for="item in state.option"  :key="item.value"
											 :label="item.label"
											 :value="item.value"/>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="init()">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
<!--商品-->
	<el-row>
		<el-col :span="24">
			<el-table :data="state.tableData" style="width: 100%" border >
				<el-table-column prop="productId" label="编号"  align="center" />
				<el-table-column prop="productTitle" label="题目" width="180" align="center" />
				<el-table-column prop="productIntro" label="简介" width="180" align="center" />
				<el-table-column prop="productCate" label="分类" width="180" align="center" />
				<el-table-column prop="productTag" label="标签" width="180" align="center" />

				<el-table-column prop="priceCurrentPrice" label="价格" align="center" >
					<template  #default="scope">
						{{scope.row.priceCurrentPrice ===0?"免费" :scope.row.priceCurrentPrice}}
					</template>
				</el-table-column>
				<el-table-column prop="downNum" label="下载次数" width="180" align="center" />
				<el-table-column label="操作" min-width="120" align="center">
					<template #default="scope">
						<el-button link type="primary" size="small" @click="toInfo(scope.row.productDesc)">查看详情</el-button>
<!--						<el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">-->
<!--							修改-->
<!--						</el-button>-->
						<el-button v-if="scope.row.productIsPutaway ===1" link type="primary" size="small" @click.prevent="del(scope.row.productId,0)">删除</el-button>
						<el-button v-else link type="primary" size="small" @click.prevent="del(scope.row.productId,1)">恢复</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
	</el-row>
	<div class="pagination-container">
		<el-pagination
			:page-size="state.pageValidate.pageSize"
			layout="prev, pager, next"
			:total="state.pageValidate.total"
			@current-change="handleCurrentChange"
		/>
	</div>
	<el-dialog v-model="state.viewDialogVisible" title="详情" width="50%">
		<div v-html="state.info"></div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="state.viewDialogVisible = false">确定</el-button>
			</div>
		</template>
	</el-dialog>

</template>
<script setup lang="ts">

const state = reactive(<any>{
	option:[
		{ label: '已使用', value: 1 },
		{ label: '已删除', value: 0 },
	],

	tableData:[],
	pageValidate: {
		pageNo: 1,
		pageSize: 8,
		total: 10,
	},
	queryFrom: {
		name: '',
		type: '',
		productIsPutaway: 1,
		productType: 2
	},
	viewDialogVisible:false,
	info:""
})


/**
 * 分页
 * @param val
 */
const handleCurrentChange = (val: number) => {
	state.pageValidate.pageNo = val
	init()
}


/**
 * 查看详情
 */
function toInfo(data:string) {
		state.viewDialogVisible = true;
		state.info = data;
}

/**
 * 删除（下架）
 */
function del(data:number,status:any) {
	const  request = {
		"productId" : data,
		"productIsPutaway":status
	}
	postRequest('/api/admin/product/updateProductAdmin',request).then((res:any) =>{
		if (res.code === 200) {
			if (status === 0) {
				toast.success('操作成功')
			}
			init()
		}
	})
}


/**
 * 初始化
 */
function init() {
	postRequest('/api/admin/product/searchProductAdmin', {
		pageValidate: { pageValidate: state.pageValidate },
		params: state.queryFrom
	}).then((res: any) => {
		state.tableData = res.data.lists
		state.pageValidate.total = res.data.count
		state.pageValidate.pageSize = res.data.pageSize
		state.pageValidate.pageNo = res.data.pageNo
	})
}

onMounted(()=>{
	init()
})

</script>

<style scoped>

:deep(.el-select){
	width: 120px;
}

.pagination-container {
	display: flex;
	justify-content: center;
	margin-top: 20px; /* 可根据需要调整外边距 */
}
</style>
